<template>

  <div id="main" :class="className" :style="{height:height,width:width}"  ref="Dialog" > </div>

</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '220px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: false
    },
    checkList:{
      type: Array,
      default:()=>[]
    },
    legendShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null,
      series:[],
      legend:{},
      colors:{"5m":"#B5C706","10m":"#76D305","15m":"#00EB43","20m":"#00F78C","25m":"#00ECB8","30m":"#00B6DF","35m":"#003EB4","40m":"#0018FE","45m":"#5B00F4","50m":"#48008B"},
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        //this.setOptions(val)
        this.chartData = val;
        this.initChart()
      }
    },
    checkList: {
      deep: true,
      handler(val) {
        this.series=[];
        this.legend = [];
        let temperatureData = this.chartData.temperatureData;
        if(val.length == 0){
          for (let key in temperatureData){
            if(this.legendShow){
              this.legend.push(key);
            }
            this.series.push({
              name: key,
              smooth: true,
              type: 'line',
              data:temperatureData[key],
              animationDuration: 2800,
              animationEasing: 'quadraticOut',
              itemStyle: {
                normal: {
                 color:this.colors[key]
                }
              }
            })
          }
        }else {
          for (let key in temperatureData){
            if(val.includes(key)){
              if(this.legendShow){
                this.legend.push(key);
              }
              this.series.push({
                name: key,
                smooth: true,
                type: 'line',
                data:temperatureData[key],
                animationDuration: 2800,
                animationEasing: 'quadraticOut',
                itemStyle: {
                  normal: {
                    color:this.colors[key]
                  }
                }
              })
            }
          }
        }
        let option = this.chart.getOption();
        option.series = this.series;
        this.chart.setOption(option,true)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.series =[];
      this.legend = [];
      let temperatureData = this.chartData.temperatureData;
      if(this.checkList.length == 0){
        for (let key in temperatureData){
          if(this.legendShow){
            this.legend.push(key);
          }
          this.series.push({
            name: key,
            smooth: true,
            type: 'line',
            data:temperatureData[key],
            animationDuration: 2800,
            animationEasing: 'quadraticOut',
            itemStyle: {
                  normal: {
                    color:this.colors[key]
                  }
                }
          })
        }
      }else {
        for (let key in temperatureData){
          if(this.checkList.includes(key)){
            if(this.legendShow){
              this.legend.push(key);
            }
            this.series.push({
              name: key,
              smooth: true,
              type: 'line',
              data:temperatureData[key],
              animationDuration: 2800,
              animationEasing: 'quadraticOut',
              itemStyle: {
                  normal: {
                    color:this.colors[key]
                  }
                }
            })
          }
        }
      }
      this.setOptions()
    },
    setOptions() {
      this.chart.setOption({
        xAxis: {
          data: this.chartData.timeList,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        legend:{
          data : this.legend
        },
        tooltip: {
          trigger: 'axis',
          /*axisPointer: {
            type: 'cross'
          },
          order: 'seriesAsc',*/
          formatter: function(params) {
            let newParams = [];
            let tooltipString = [];
            newParams = [...params];
            newParams.sort((a, b) => {
              return a.seriesName.substring(0,a.seriesName.length-1)-b.seriesName.substring(0,b.seriesName.length-1)
            });
            newParams.forEach((p) => {
              const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>';
              tooltipString.push(cont);
            });
            return tooltipString.join('');
          },
          padding: [5, 10]
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          },
        },
        grid: {
          left: 2,
          top:32,
          right:15,
          bottom: 0,
          containLabel: true
        },
        series: this.series
      })
    },
  }
}
</script>
